<!doctype html>
<html lang="zh-Hans">

<head>
  <meta charset="utf-8">
  <meta name="author" content="Fresns" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <meta name="format-detection" content="telephone=no,address=no,email=no">
  <meta name="mobileOptimized" content="width">
  <meta name="HandheldFriendly" content="true">
  <meta name="applicable-device" content="mobile">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Fresns">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/fontawesome.min.css">
  <link rel="stylesheet" href="assets/css/client-mobile.css">
  <title>Fresns 手机版</title>
</head>

<body>

  <div class="home-banner">
    <img src="assets/images/ads.jpg">
  </div>

  <nav class="toptab shadow-sm sticky-top clearfix">
    <div class="toptab-btn float-left"><a class="btn_icon"href="#"><i class="fas fa-search"></i></a></div>
    <div class="toptab-nav float-left">
      <ul class="nav justify-content-center" id="myTab" role="tablist">
        <li class="nav-item">
          <a class="navbar-link active" id="tab-follow" data-toggle="tab" href="#follow" role="tab" aria-controls="follow" aria-selected="false">关注</a>
        </li>
        <li class="nav-item">
          <a class="navbar-link" id="tab-square" data-toggle="tab" href="#square" role="tab" aria-controls="square" aria-selected="false">广场</a>
        </li>
        <li class="nav-item">
          <a class="navbar-link" id="tab-nearby" data-toggle="tab" href="#nearby" role="tab" aria-controls="nearby" aria-selected="false">附近</a>
        </li>
      </ul>
    </div>
    <div class="toptab-btn float-right"><a class="btn_icon" href="editor.html"><i class="fas fa-edit"></i></a></div>
  </nav>

  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="follow" role="tabpanel" aria-labelledby="tab-follow">
      <!--list-->
      <div class="list">
        <div class="list-header clearfix">
          <div class="float-left thread-avatar">
            <img src="assets/images/avatar-decorate.png" class="user-avatar_decorate">
            <img src="https://tangjie.me/media/avatar.jpg" class="rounded-circle user-avatar">
          </div>
          <div class="float-left thread-item">
            <div class="thread-user text-nowrap clearfix">
              <div class="float-left user-nickname">用户昵称</div>
              <div class="float-left user-icon">
                <span class="badge badge-pill badge-light user-role text-secondary">管理员</span>
                <img src="assets/images/user-icon.png" class="user-icon_img">
                <img src="assets/images/user-icon.png" class="user-icon_img">
              </div>
            </div>
            <div class="thread-info clearfix">
              <div class="float-left thread-time">10分钟前</div>
              <div class="float-left thread-lbs"><i class="fas fa-map-marker-alt"></i>东方明珠</div>
            </div>
          </div>
        </div>
        <div class="list-body">
          <h3 class="thread-title">主题带标题</h3>
          <div class="thread-text">
            <p>Fresns 是一款免费<a href="#">#开源</a> 的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
            <p>这里演示单 # 号话题方式</p>
            <div class="collapsing" id="tid-1">
              <p>隐藏的内容开始，Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
            </div>
            <button class="btn btn-link thread-collapse" type="button" data-toggle="collapse" data-target="#tid-1" aria-expanded="false">
              <span class="d-block">展开</span>
              <span class="d-none">收起</span>
            </button>
          </div>
          <div class="type-image">
            <div class="row">
              <div class="col"><img src="https://tangjie.me/media/themes/TangStyle.jpg" class="img-fluid"></div>
              <div class="col"><img src="https://tangjie.me/media/themes/TangStyle.jpg" class="img-fluid"></div>
              <div class="col"><img src="https://tangjie.me/media/themes/TangStyle.jpg" class="img-fluid"></div>
            </div>
            <div class="row">
              <div class="col"><img src="https://tangjie.me/media/themes/TangStyle.jpg" class="img-fluid"></div>
              <div class="col"><img src="https://tangjie.me/media/themes/TangStyle.jpg" class="img-fluid"></div>
            </div>
          </div>
          <div class="thread-categories"><a href="#" class="badge badge-pill badge-light text-secondary"><i class="fas fa-archive"></i> 小组名</a></div>
          <div class="thread-post-hot">
            <div class="clearfix">
              <div class="float-left"><span class="badge badge-warning">热评</span></div>
              <div class="float-right text-muted">88 赞</div>
            </div>
            <div class="post-text">用户名: <span class="text-muted">专为移动互联网而打造的下一代社区开源程序</span></div>
          </div>
        </div>
        <div class="list-footer">
          <div class="thread-like">
            <button class="btn btn-link like_active"><img src="assets/images/icon_like_active.png"> 99999</button>
          </div>
          <div class="thread-comment">
            <button class="btn btn-link"><img src="assets/images/icon_comment.png"> 99999</button>
          </div>
          <div class="thread-share dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_share.png"></button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <h6 class="dropdown-header">分享到</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="fab fa-weixin"></i> 微信好友</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-life-ring"></i> 朋友圈</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-image"></i> 生成分享图</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="fab fa-fedora"></i> 分享小程序</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-copy"></i> 复制链接</a>
            </div>
          </div>
          <div class="thread-more text-right dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_more.png"></button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#"><i class="far fa-star"></i> 加入收藏</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">设为置顶</a>
              <a class="dropdown-item" href="#">设为精华</a>
              <a class="dropdown-item" href="#">不看 TA 发表的内容</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-edit"></i> 编辑</a>
              <a class="dropdown-item" href="#"><i class="far fa-trash-alt"></i> 删除</a>
            </div>
          </div>
        </div>
      </div>
      <!--divider-->
      <div class="list">
        <div class="list-header clearfix">
          <div class="float-left thread-avatar">
            <img src="https://tangjie.me/media/avatar.jpg" class="rounded-circle user-avatar">
          </div>
          <div class="float-left thread-item">
            <div class="user-info clearfix">
              <div class="float-left user-nickname user-anonymous">匿名用户</div>
              <div class="float-left user-icon">
              </div>
            </div>
            <div class="thread-info clearfix">
              <div class="float-left thread-time">10分钟前</div>
              <div class="float-left thread-lbs"><i class="fas fa-map-marker-alt"></i>东方明珠</div>
            </div>
          </div>
        </div>
        <div class="list-body">
          <div class="thread-text">
            <p>Fresns 是一款免费<a href="#">#开源#</a>的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
            <p>这里演示双 # 号话题方式</p>
            <p><a class="text-info" href="#">全文</a></p>
          </div>
          <div class="type-image">
            <div class="row">
              <div class="col"><img src="https://tangjie.me/media/themes/TangStyle.jpg" class="img-fluid"></div>
            </div>
          </div>
          <div class="thread-categories"><a href="#" class="badge badge-pill badge-light text-muted"><i class="fas fa-archive"></i> 小组名</a></div>
        </div>
        <div class="list-footer">
          <div class="thread-like">
            <button class="btn btn-link"><img src="assets/images/icon_like.png"> 10万+</button>
          </div>
          <div class="thread-comment">
            <button class="btn btn-link"><img src="assets/images/icon_comment.png"> 10万+</button>
          </div>
          <div class="thread-share dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_share.png"></button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <h6 class="dropdown-header">分享到</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="fab fa-weixin"></i> 微信好友</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-life-ring"></i> 朋友圈</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-image"></i> 生成分享图</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="fab fa-fedora"></i> 分享小程序</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-copy"></i> 复制链接</a>
            </div>
          </div>
          <div class="thread-more text-right dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_more.png"></button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#"><i class="fas fa-star"></i> 取消收藏</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">设为置顶</a>
              <a class="dropdown-item" href="#">设为精华</a>
              <a class="dropdown-item" href="#">不看 TA 发表的内容</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-edit"></i> 编辑</a>
              <a class="dropdown-item" href="#"><i class="far fa-trash-alt"></i> 删除</a>
            </div>
          </div>
        </div>
      </div>
      <!--divider-->
      <div class="list">
        <div class="list-header clearfix">
          <div class="float-left thread-avatar">
            <img src="https://tangjie.me/media/avatar.jpg" class="rounded-circle user-avatar">
          </div>
          <div class="float-left thread-item">
            <div class="user-info clearfix">
              <div class="float-left user-nickname">用户昵称</div>
              <div class="float-left user-icon">
                <img src="assets/images/user-icon.png" class="user-icon_img">
              </div>
            </div>
            <div class="thread-info clearfix">
              <div class="float-left thread-time">10分钟前</div>
            </div>
          </div>
        </div>
        <div class="list-body">
          <div class="thread-text">
            <p>Fresns 是一款免费开源的社交网络服务软件</p>
            <p>专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
          </div>
          <div class="type-video">
            <div class="video-position">
              <img src="assets/images/play.png" class="video-play">
              <img src="assets/images/video.gif" class="img-fluid">
            </div>
          </div>
          <div class="thread-categories"><a href="#" class="badge badge-pill badge-light text-muted"><i class="fas fa-archive"></i> 小组名</a></div>
        </div>
        <div class="list-footer">
          <div class="thread-like">
            <button class="btn btn-link"><img src="assets/images/icon_like.png"> </button>
          </div>
          <div class="thread-comment">
            <button class="btn btn-link"><img src="assets/images/icon_comment.png"> </button>
          </div>
          <div class="thread-share dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_share.png"></button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <h6 class="dropdown-header">分享到</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-copy"></i> 复制链接</a>
            </div>
          </div>
          <div class="thread-more text-right dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_more.png"></button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#"><i class="fas fa-star"></i> 取消收藏</a>
            </div>
          </div>
        </div>
      </div>
      <!--divider-->
      <div class="list">
        <div class="list-header clearfix">
          <div class="float-left thread-avatar">
            <img src="https://tangjie.me/media/avatar.jpg" class="rounded-circle user-avatar">
          </div>
          <div class="float-left thread-item">
            <div class="user-info clearfix">
              <div class="float-left user-nickname">用户昵称</div>
              <div class="float-left user-icon">
                
              </div>
            </div>
            <div class="thread-info clearfix">
              <div class="float-left thread-time">10分钟前</div>
            </div>
          </div>
        </div>
        <div class="list-body">
          <div class="thread-text">
            <p>录制的语音或者分享的歌曲，无论是哪种方式，这是一条音频内容。</p>
            <p>歌曲《<a href="https://tangjie.me/blog/194.html" target="_blank">蜗牛快跑</a>》<a href="https://tangjie.me/blog/194.html" target="_blank">https://tangjie.me/blog/194.html</a></p>
          </div>
          <div class="type-audio">
            <audio src="https://tangjie.me/media/woniu.mp3" controls="controls" preload="meta">
              Your browser does not support the audio element.
            </audio>
          </div>
          <div class="thread-categories"><a href="#" class="badge badge-pill badge-light text-muted"><i class="fas fa-archive"></i> 小组名</a></div>
        </div>
        <div class="list-footer">
          <div class="thread-like">
            <button class="btn btn-link"><img src="assets/images/icon_like.png"> </button>
          </div>
          <div class="thread-comment">
            <button class="btn btn-link"><img src="assets/images/icon_comment.png"> </button>
          </div>
          <div class="thread-share dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_share.png"></button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <h6 class="dropdown-header">分享到</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-copy"></i> 复制链接</a>
            </div>
          </div>
          <div class="thread-more text-right dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_more.png"></button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#"><i class="fas fa-star"></i> 取消收藏</a>
            </div>
          </div>
        </div>
      </div>
      <!--divider-->
      <div class="list">
        <div class="list-header clearfix">
          <div class="float-left thread-avatar">
            <img src="https://tangjie.me/media/avatar.jpg" class="rounded-circle user-avatar">
          </div>
          <div class="float-left thread-item">
            <div class="user-info clearfix">
              <div class="float-left user-nickname">用户昵称</div>
              <div class="float-left user-icon">
                
              </div>
            </div>
            <div class="thread-info clearfix">
              <div class="float-left thread-time">10分钟前</div>
            </div>
          </div>
        </div>
        <div class="list-body">
          <div class="thread-text">
            <p>这是一条带“文件”附件的帖子</p>
          </div>
          <div class="type-file clearfix">
            <div class="file-icon float-left"><i class="far fa-file-pdf"></i></div>
            <div class="file-name text-truncate">Fresns 社交网络服务软件.pdf</div>
          </div>
          <div class="type-file clearfix">
            <div class="file-icon float-left"><i class="far fa-file-word"></i></div>
            <div class="file-name text-truncate">Fresns 社交网络服务软件.doc</div>
          </div>
          <div class="type-file clearfix">
            <div class="file-icon float-left"><i class="far fa-file-excel"></i></div>
            <div class="file-name text-truncate">Fresns 社交网络服务软件.xls</div>
          </div>
          <div class="type-file clearfix">
            <div class="file-icon float-left"><i class="far fa-file-powerpoint"></i></div>
            <div class="file-name text-truncate">Fresns 社交网络服务软件.ppt</div>
          </div>
          <div class="type-file clearfix">
            <div class="file-icon float-left"><i class="far fa-file-archive"></i></div>
            <div class="file-name text-truncate">Fresns 社交网络服务软件.zip</div>
          </div>
          <div class="type-file clearfix">
            <div class="file-icon float-left"><i class="far fa-file"></i></div>
            <div class="file-name text-truncate">Fresns 社交网络服务软件</div>
          </div>
          <div class="thread-categories"><a href="#" class="badge badge-pill badge-light text-muted"><i class="fas fa-archive"></i> 小组名</a></div>
        </div>
        <div class="list-footer">
          <div class="thread-like">
            <button class="btn btn-link"><img src="assets/images/icon_like.png"> </button>
          </div>
          <div class="thread-comment">
            <button class="btn btn-link"><img src="assets/images/icon_comment.png"> </button>
          </div>
          <div class="thread-share dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_share.png"></button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <h6 class="dropdown-header">分享到</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-copy"></i> 复制链接</a>
            </div>
          </div>
          <div class="thread-more text-right dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_more.png"></button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#"><i class="fas fa-star"></i> 取消收藏</a>
            </div>
          </div>
        </div>
      </div>
      <!--list end-->
    </div>
    <div class="tab-pane fade" id="square" role="tabpanel" aria-labelledby="tab-square">
      <!--list-->
      <div class="list">
        <div class="list-header clearfix">
          <div class="float-left thread-avatar">
            <img src="assets/images/avatar-decorate.png" class="user-avatar_decorate">
            <img src="https://tangjie.me/media/avatar.jpg" class="rounded-circle user-avatar">
          </div>
          <div class="float-left thread-item">
            <div class="thread-user text-nowrap clearfix">
              <div class="float-left user-nickname">用户昵称</div>
              <div class="float-left user-icon">
                <span class="badge badge-pill badge-light user-role text-secondary">管理员</span>
              </div>
            </div>
            <div class="thread-info clearfix">
              <div class="float-left thread-time">1分钟前</div>
            </div>
          </div>
        </div>
        <div class="list-body">
          <h3 class="thread-title">主题带标题</h3>
          <div class="thread-text">
            <p>Fresns 是一款免费<a href="#">#开源#</a>的社交网络服务软件，🥳️专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。<a href="https://36kr.com/p/1723622522881" target="_blank">https://36kr.com/p/1723622522881</a></p>
          </div>
          <div class="type-text">
            <div class="type-text-content">
              <p>Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
            </div>
          </div>
          <div class="thread-categories"><a href="#" class="badge badge-pill badge-light text-secondary"><i class="fas fa-archive"></i> 小组名</a></div>
          <div class="thread-post-hot">
            <div class="clearfix">
              <div class="float-left"><span class="badge badge-warning">热评</span></div>
              <div class="float-right text-muted">88 赞</div>
            </div>
            <div class="post-text">用户名: <span class="text-muted">专为移动互联网而打造的下一代社区开源程序</span></div>
            <div class="type-image">
              <div class="row">
                <div class="col"><img src="https://tangjie.me/media/themes/TangStyle.jpg" class="img-fluid"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="list-footer">
          <div class="thread-like">
            <button class="btn btn-link"><img src="assets/images/icon_like.png"> 91</button>
          </div>
          <div class="thread-comment">
            <button class="btn btn-link"><img src="assets/images/icon_comment.png"> 52</button>
          </div>
          <div class="thread-share dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_share.png"></button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <h6 class="dropdown-header">分享到</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="fab fa-weixin"></i> 微信好友</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-life-ring"></i> 朋友圈</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-image"></i> 生成分享图</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="fab fa-fedora"></i> 分享小程序</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-copy"></i> 复制链接</a>
            </div>
          </div>
          <div class="thread-more text-right dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_more.png"></button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#"><i class="fas fa-star"></i> 取消收藏</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">设为置顶</a>
              <a class="dropdown-item" href="#">设为精华</a>
              <a class="dropdown-item" href="#">不看 TA 发表的内容</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-edit"></i> 编辑</a>
              <a class="dropdown-item" href="#"><i class="far fa-trash-alt"></i> 删除</a>
            </div>
          </div>
        </div>
      </div>
      <!--divider-->
      <div class="list">
        <div class="list-header clearfix">
          <div class="float-left thread-avatar">
            <img src="assets/images/avatar-decorate.png" class="user-avatar_decorate">
            <img src="https://tangjie.me/media/avatar.jpg" class="rounded-circle user-avatar">
          </div>
          <div class="float-left thread-item">
            <div class="thread-user text-nowrap clearfix">
              <div class="float-left user-nickname">用户昵称</div>
              <div class="float-left user-icon">
                <span class="badge badge-pill badge-light user-role text-secondary">管理员</span>
              </div>
            </div>
            <div class="thread-info clearfix">
              <div class="float-left thread-time">1分钟前</div>
            </div>
          </div>
        </div>
        <div class="list-body">
          <div class="type-text">
            <div class="type-text-content">
              <p><strong>Jarvis</strong> 提问：</p>
              <p>Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
            </div>
            <div class="type-image">
              <div class="row">
                <div class="col"><img src="https://tangjie.me/media/themes/TangStyle.jpg" class="img-fluid"></div>
              </div>
            </div>
          </div>
          <div class="thread-text">
            <p><img src="https://bbs.iherb.com/static/image/smiley/default/biggrin.gif" width="28" height="28">Fresns 是一款免费<a href="#">#开源</a> 的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
          </div>
          <div class="thread-categories"><a href="#" class="badge badge-pill badge-light text-secondary"><i class="fas fa-archive"></i> 小组名</a></div>
        </div>
        <div class="list-footer">
          <div class="thread-like">
            <button class="btn btn-link"><img src="assets/images/icon_like.png"> 10</button>
          </div>
          <div class="thread-comment">
            <button class="btn btn-link"><img src="assets/images/icon_comment.png"> 5</button>
          </div>
          <div class="thread-share dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_share.png"></button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <h6 class="dropdown-header">分享到</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-copy"></i> 复制链接</a>
            </div>
          </div>
          <div class="thread-more text-right dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_more.png"></button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#"><i class="fas fa-star"></i> 取消收藏</a>
            </div>
          </div>
        </div>
      </div>
      <!--divider-->
      <div class="list">
        <div class="list-header clearfix">
          <div class="float-left thread-avatar">
            <img src="assets/images/avatar-decorate.png" class="user-avatar_decorate">
            <img src="https://tangjie.me/media/avatar.jpg" class="rounded-circle user-avatar">
          </div>
          <div class="float-left thread-item">
            <div class="thread-user text-nowrap clearfix">
              <div class="float-left user-nickname">用户昵称</div>
              <div class="float-left user-icon">
                <span class="badge badge-pill badge-light user-role text-secondary">管理员</span>
              </div>
            </div>
            <div class="thread-info clearfix">
              <div class="float-left thread-time">1分钟前</div>
            </div>
          </div>
        </div>
        <div class="list-body">
          <div class="thread-text">
            <p>Fresns 是一款免费<a href="#">#开源</a> 的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
          </div>
          <!--type-info 内容，在下方-->
          <!--正方图-->
          <div class="type-info info-basis clearfix">
            <div class="info-img"><img src="https://cdn.bielang.com/website/images/products-pm.jpg"></div>
            <div class="info-body">
              <div class="info-title">Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</div>
            </div>
            <div class="info-btn"><span class="btn btn-info btn-sm text-nowrap">按钮</span></div>
          </div>
          <div class="type-info info-basis clearfix">
            <div class="info-img"><img src="https://cdn.bielang.com/website/images/products-pm.jpg"></div>
            <div class="info-body">
              <div class="info-title">Fresns 是一款免费开源的社交网络服务软件</div>
            </div>
            <div class="info-btn"><span class="btn btn-info btn-sm text-nowrap">按钮</span></div>
          </div>
          <!--正方图 end-->
          <!--正方图-大图-->
          <div class="type-info info-big clearfix">
            <div class="info-img"><img src="https://cdn.bielang.com/website/images/products-pm.jpg"></div>
            <div class="info-body">
              <div class="info-title">Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</div>
              <div class="info-desc">副信息</div>
              <div class="info-desc">副信息</div>
            </div>
            <div class="info-btn"><span class="btn btn-info btn-sm text-nowrap">投票</span></div>
          </div>
          <div class="type-info info-big clearfix">
            <div class="info-img"><img src="https://cdn.bielang.com/website/images/products-pm.jpg"></div>
            <div class="info-body">
              <div class="info-title">Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</div>
              <div class="info-desc">副信息</div>
            </div>
          </div>
          <!--正方图-大图 end-->
          <!--纵向图-->
          <div class="type-info info-portrait clearfix">
            <div class="info-img"><img src="https://cdn.bielang.com/website/images/products-pm.jpg"></div>
            <div class="info-body">
              <div class="info-title">Fresns 是一款免费开源的社交网络服务软件</div>
              <div class="info-desc">副信息</div>
              <div class="info-desc">副信息</div>
            </div>
            <div class="info-btn"><span class="btn btn-info btn-sm text-nowrap">点击购买</span></div>
          </div>
          <!--纵向图 end-->
          <!--横向图 end-->
          <div class="type-info info-landscape clearfix">
            <div class="info-img"><img src="https://cdn.bielang.com/website/images/products-erp.jpg"></div>
            <div class="info-body">
              <div class="info-title">Fresns 社交网络服务软件</div>
              <div class="info-desc">副信息</div>
            </div>
            <div class="info-btn"><span class="btn btn-info btn-sm text-nowrap">点击购买</span></div>
          </div>
          <!--横向图 end-->
          <div class="thread-categories"><a href="#" class="badge badge-pill badge-light text-secondary"><i class="fas fa-archive"></i> 小组名</a></div>
        </div>
        <div class="list-footer">
          <div class="thread-like">
            <button class="btn btn-link"><img src="assets/images/icon_like.png"> 10</button>
          </div>
          <div class="thread-comment">
            <button class="btn btn-link"><img src="assets/images/icon_comment.png"> 5</button>
          </div>
          <div class="thread-share dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_share.png"></button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <h6 class="dropdown-header">分享到</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-copy"></i> 复制链接</a>
            </div>
          </div>
          <div class="thread-more text-right dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_more.png"></button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#"><i class="fas fa-star"></i> 取消收藏</a>
            </div>
          </div>
        </div>
      </div>
      <!--divider-->
      <div class="list">
        <div class="list-header clearfix">
          <div class="float-left thread-avatar">
            <img src="assets/images/avatar-decorate.png" class="user-avatar_decorate">
            <img src="https://tangjie.me/media/avatar.jpg" class="rounded-circle user-avatar">
          </div>
          <div class="float-left thread-item">
            <div class="thread-user text-nowrap clearfix">
              <div class="float-left user-nickname">用户昵称</div>
              <div class="float-left user-icon">
                <span class="badge badge-pill badge-light user-role text-secondary">管理员</span>
              </div>
            </div>
            <div class="thread-info clearfix">
              <div class="float-left thread-time">1分钟前</div>
            </div>
          </div>
        </div>
        <div class="list-body">
          <!--type-info 内容，在上方-->
          <div class="type-info info-big clearfix">
            <div class="info-img"><img src="https://cdn.bielang.com/website/images/products-pm.jpg"></div>
            <div class="info-body">
              <div class="info-title">专为移动互联网而打造的下一代社区产品，免费开源，符合时代潮流，更开放且更易于二次开发。</div>
              <div class="info-desc">副信息</div>
              <div class="info-desc">副信息</div>
            </div>
          </div>
          <div class="type-info info-landscape clearfix">
            <div class="info-img"><img src="https://cdn.bielang.com/website/images/products-erp.jpg"></div>
            <div class="info-body">
              <div class="info-title">Fresns 是一款专为移动互联网而打造的下一代社区产品，免费开源，符合时代潮流，更开放且更易于二次开发。</div>
              <div class="info-desc">副信息</div>
            </div>
          </div>
          <!--type-info 内容 end-->
          <div class="thread-text">
            <p>Fresns 是一款免费<a href="#">#开源</a> 的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
          </div>
          <div class="thread-categories"><a href="#" class="badge badge-pill badge-light text-secondary"><i class="fas fa-archive"></i> 小组名</a></div>
        </div>
        <div class="list-footer">
          <div class="thread-like">
            <button class="btn btn-link"><img src="assets/images/icon_like.png"> 10</button>
          </div>
          <div class="thread-comment">
            <button class="btn btn-link"><img src="assets/images/icon_comment.png"> 5</button>
          </div>
          <div class="thread-share dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_share.png"></button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <h6 class="dropdown-header">分享到</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-copy"></i> 复制链接</a>
            </div>
          </div>
          <div class="thread-more text-right dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_more.png"></button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#"><i class="fas fa-star"></i> 取消收藏</a>
            </div>
          </div>
        </div>
      </div>
      <!--list end-->
    </div>
    <div class="tab-pane fade" id="nearby" role="tabpanel" aria-labelledby="tab-nearby">
      <!--list-->
      <div class="list">
        <div class="list-header clearfix">
          <div class="float-left thread-avatar">
            <img src="https://tangjie.me/media/avatar.jpg" class="rounded-circle user-avatar">
          </div>
          <div class="float-left thread-item">
            <div class="thread-user text-nowrap clearfix">
              <div class="float-left user-nickname">用户昵称</div>
              <div class="float-left user-icon">
                <span class="badge badge-pill badge-light user-role text-secondary">管理员</span>
              </div>
            </div>
            <div class="thread-info clearfix">
              <div class="float-left thread-time">1分钟前</div>
            </div>
          </div>
        </div>
        <div class="list-body">
          <h3 class="thread-title info-allow_content">主题带标题</h3>
          <div class="thread-text info-allow_content">
            <p>Fresns 是一款免费<a href="#">#开源</a> 的社交网络服务软件，🥳️专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。<a href="#">https://36kr.com/p/1723622522881</a></p>
          </div>
          <!--判断权限主题，无权时显示内容-->
          <!--无权时，内容 div 带 info-allow_content 样式 -->
          <div class="info-allow_mask_static"></div>
          <div class="info-allow mt-2 text-center">
            <div class="text-secondary mb-2">可试读前 10% 内容</div>
            <div class="allow-btn mb-2"><a class="btn btn-warning btn-block btn-lg" href="#" role="button">¥8.00 阅读全部</a></div>
          </div>
          <!--判断权限主题 end-->
          <div class="thread-categories"><a href="#" class="badge badge-pill badge-light text-secondary"><i class="fas fa-archive"></i> 小组名</a></div>
        </div>
        <div class="list-footer">
          <div class="thread-like">
            <button class="btn btn-link"><img src="assets/images/icon_like.png"> 91</button>
          </div>
          <div class="thread-comment">
            <button class="btn btn-link"><img src="assets/images/icon_comment.png"> 52</button>
          </div>
          <div class="thread-share dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_share.png"></button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <h6 class="dropdown-header">分享到</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="fab fa-weixin"></i> 微信好友</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-life-ring"></i> 朋友圈</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-image"></i> 生成分享图</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="fab fa-fedora"></i> 分享小程序</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-copy"></i> 复制链接</a>
            </div>
          </div>
          <div class="thread-more text-right dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_more.png"></button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#"><i class="fas fa-star"></i> 取消收藏</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">设为置顶</a>
              <a class="dropdown-item" href="#">设为精华</a>
              <a class="dropdown-item" href="#">不看 TA 发表的内容</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-edit"></i> 编辑</a>
              <a class="dropdown-item" href="#"><i class="far fa-trash-alt"></i> 删除</a>
            </div>
          </div>
        </div>
      </div>
      <!--divider-->
      <div class="list">
        <div class="list-header clearfix">
          <div class="float-left thread-avatar">
            <img src="https://tangjie.me/media/avatar.jpg" class="rounded-circle user-avatar">
          </div>
          <div class="float-left thread-item">
            <div class="thread-user text-nowrap clearfix">
              <div class="float-left user-nickname">用户昵称</div>
              <div class="float-left user-icon">
                <span class="badge badge-pill badge-light user-role text-secondary">管理员</span>
              </div>
            </div>
            <div class="thread-info clearfix">
              <div class="float-left thread-time">1分钟前</div>
            </div>
          </div>
        </div>
        <div class="list-body">
          <h3 class="thread-title info-allow_content">主题带标题</h3>
          <div class="thread-text info-allow_content">
            <p>Fresns 是一款免费<a href="#">#开源</a> 的社交网络服务软件，🥳️专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。<a href="#">https://36kr.com/p/1723622522881</a></p>
          </div>
          <!--判断权限主题，无权时显示内容-->
          <!--无权时，内容 div 带 info-allow_content 样式 -->
          <div class="info-allow_mask_static"></div>
          <div class="info-allow mt-2 text-center">
            <div class="text-secondary mb-2">可试读前 10% 内容</div>
            <div class="allow-btn mb-2"><a class="btn btn-warning btn-block btn-lg" href="#" role="button">输入密码访问全部内容</a></div>
          </div>
          <!--判断权限主题 end-->
          <div class="thread-categories"><a href="#" class="badge badge-pill badge-light text-secondary"><i class="fas fa-archive"></i> 小组名</a></div>
        </div>
        <div class="list-footer">
          <div class="thread-like">
            <button class="btn btn-link"><img src="assets/images/icon_like.png"> 91</button>
          </div>
          <div class="thread-comment">
            <button class="btn btn-link"><img src="assets/images/icon_comment.png"> 52</button>
          </div>
          <div class="thread-share dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_share.png"></button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <h6 class="dropdown-header">分享到</h6>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="fab fa-weixin"></i> 微信好友</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-life-ring"></i> 朋友圈</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-image"></i> 生成分享图</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="fab fa-fedora"></i> 分享小程序</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-copy"></i> 复制链接</a>
            </div>
          </div>
          <div class="thread-more text-right dropdown dropup">
            <button class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/images/icon_more.png"></button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#"><i class="fas fa-star"></i> 取消收藏</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">设为置顶</a>
              <a class="dropdown-item" href="#">设为精华</a>
              <a class="dropdown-item" href="#">不看 TA 发表的内容</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i class="far fa-edit"></i> 编辑</a>
              <a class="dropdown-item" href="#"><i class="far fa-trash-alt"></i> 删除</a>
            </div>
          </div>
        </div>
      </div>
      <!--list end-->
    </div>
  </div>

  <!-- Footer -->
  <div class="footer text-center text-secondary mt-2 pb-5">
    <p class="mb-1">苏ICP备15021382号-1</p>
    <p class="mb-4">Powered by Fresns</p>
  </div>

  <!-- TabBar -->
  <nav class="row fixed-bottom tabbar">
    <a class="col text-center text-success" href="index.html">
      <img class="tabbar-icon" src="assets/images/tabbar_icon.png">
      <div class="tabbar-text">首页</div>
    </a>
    <a class="col text-center text-secondary" href="groups.html">
      <img class="tabbar-icon" src="assets/images/tabbar_icon.png">
      <div class="tabbar-text">小组</div>
    </a>
    <a class="col text-center text-secondary" href="portal.html">
      <img class="tabbar-icon" src="assets/images/tabbar_icon.png">
      <div class="tabbar-text">门户</div>
    </a>
    <a class="col text-center text-secondary" href="extends.html">
      <img class="tabbar-icon" src="assets/images/tabbar_icon.png">
      <div class="tabbar-text">扩展</div>
    </a>
    <a class="col text-center text-secondary" href="me.html">
      <img class="tabbar-icon" src="assets/images/tabbar_icon.png">
      <div class="tabbar-text">我</div>
    </a>
  </nav>


  <!-- JavaScript -->
  <script src="assets/js/jquery-3.5.1.slim.min.js"></script>
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/client-mobile.js"></script>
</body>

</html>